<template>
  <footer class="footer-page">
    <Transition>
      <div v-show="showFooter">
        <div class="footer-page-container" :style="{ 'justify-content': positionMapping[position] }">
          <span v-for="(item, index) in methods" :key="index">
            <el-button v-if="item.permission" :type="item.type ? 'primary' : ''" v-btn-password="{
              beforePermission: item.beforePermission,
              clickEvent: item.clickEvent
            }" class="ml-3" :id="`hotKey-${item.buttonName}`">{{ $t(item.buttonName) }}</el-button>
            <el-button v-else class="ml-3" :type="item.type ? 'primary' : ''" @click="item.clickEvent">{{
              $t(item.buttonName)
            }}</el-button>

          </span>
        </div>
      </div>
    </Transition>
  </footer>
</template>

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { onMounted } from "vue";
import { onBeforeUnmount, onBeforeMount } from "vue";
import {
  registerHotKeys,
  unregisterHotKeys,
  HotKeyDto
} from "@/utils/hotKeyManager";

//类型定义
type Method = {
  buttonName?: string;
  disable?: boolean;
  class?: string;
  minWidth?: string;
  size?: "small" | "large" | "default";
  width?: string;
  hotKey?: string;
  notCloseTab?: boolean;
  rightContent?: string;
  permission?: boolean;// 是否添加二次密码
  beforePermission?: () => boolean;//打开二次密码之前的检查，返回true才能往下继续
  clickEvent?: Function;//
  functionID?: string;
  hide?: boolean;
  type?: string;
};
type Props = {
  showFooter: boolean;
  methods: Array<Method>;
  btnDisableFlag: boolean;
  buttonWidth: string;
  appDebounceClick: number; //回调速度设置
  // unEnableScroll: boolean; //底部菜单溢出不能左右滚动
  position?: "left" | "center" | "right"; //整体按钮位置
  needCancelBtn?: boolean;//是否默认添加Cancel按钮
};

const positionMapping = {
  left: "flex-start",
  center: "center",
  right: "flex-end"
};
const props = withDefaults(defineProps<Props>(), {
  showFooter: true,
  // unEnableScroll: false,
  position: "right",
  needCancelBtn: true,
  //设置默认的按钮
  methods: () => [
    { buttonName: "cancel" },
    { buttonName: "confirm", type: true }
  ]
});
let keyList: HotKeyDto[] = [

]
onBeforeMount(() => {
  if (!props.needCancelBtn) return;
  // Cancel 按钮没有就注册，传了就用自定义的
  const hasCancelBtn = props.methods.find(v => v.buttonName === 'cancel')
  if (!hasCancelBtn) {
    props.methods.unshift({
      buttonName: "cancel", clickEvent: () => {
        console.log('Footer添加的关闭页面');
      },
      hotKey: 'f2'
    })
  }
})
onMounted(() => {

  // 初始化加载
  keyList = props.methods.map(val => {
    return {
      key: val.hotKey,
      callback: val.clickEvent,
      isPassword: val.permission,
      buttonName: val.buttonName
    }
  });
  registerHotKeys(keyList)
});
onBeforeUnmount(() => {
  // 在组件离开路由时批量注销快捷键
  unregisterHotKeys();

});
</script>
<style lang="scss" scoped>
.footer-page {
  // position: fixed;
  bottom: 0px;
  width: -webkit-fill-available;
  padding: 12px 12px;
  background: white;
  z-index: 999;
  position: relative;
  margin-top: auto;
  width: 100%;
}

.footer-page-container {
  display: flex;
}
</style>
